<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章详情页</title>
    <link rel="stylesheet" href="../../css/public/public.css">
    <link rel="stylesheet" href="../../css/public/articleDetail.css">
    <link rel="stylesheet" href="../../plugs/fontisto/css/fontisto/fontisto.min.css">
</head>
<body>
    <div>
    <header></header>
    <div class="main-content drticle-detail-box">
        <div class="public-bn public-margin-bottom clearfix">
            <ul>
                <li>
                    <a href="../../index.html" class="fi fi-home"> 首页</a> <i class="fi fi-angle-right"></i>
                </li>
                <li>
                    <a href="../../html/jquery/jqueryIndex.html"> jQuery</a> <i class="fi fi-angle-right"></i>
                </li>
                <li>
                    <a href="jqueryIndex.html"> jQuery文章详情</a></i>
                </li>
            </ul>
        </div>
        <div class="article-detail">
            <h2>jQuery文章详情</h2>
            <div class="article-detail-info">2009年08月28日 星期五 01:11 作者：chxiyu0720</div>
            <div class="article-statement">
                <p>本文转自：<a href="http://www.zhangxinxu.com/wordpress/?p=61" target=_blank>http://www.zhangxinxu.com/wordpress/?p=61</a></p>
                <p>如有侵权，请联系我们立即删除!  QQ: 123456789</p>
            </div>
            <h3>
                本文综述
            </h3>
            <p>
                想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？本文将会告诉你如何实现多行文字的垂直居中显示。
            </p>
            <p>
                关于图片垂直居中显示，想必很多写css的人都研究过，或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法，用font-size解决IE下垂直居中的问题，是个好方法吗？是的，方法是不错，可是问题也很多：不支持img外标签的浮动，致使多图片排列时需添加额外标签；需要记住一些比例参数，上手较难；原理艰深，兼容性不稳定等。但是在我看来，这个方法不足够好！本文将提供两种更为新颖的方法，代码简洁，原理简单，上手容易，兼容性强，出错率低的方法。inline-block裸标签对齐法，以及透明图片拉伸对齐法。
            </p>
            <p>css是如此的精深，我相信后来人会有更加绝妙的方法。但是，本文提供的几种实现图片垂直居中方法，一定是目前最实用的几种方法。</p>
            <h3>一、大小不固定，多行文字的垂直居中</h3>
            <h4>1、单行文字</h4>
            <p>可能很多人都知道如何让单行文字垂直居中显示，就是使用line-height，将line-height值与外部标签盒子的高度值设置成一致就可以了。例如如下css代码：</p>
            <code>height:3em; line-height:3em; ……</code>
            <p>显示结果如下图：</p>
            <p><img src="http://image.zhangxinxu.com/image/blog/200908/2009-08-27_223115.png" alt=""></p>
            <h4>2、多行文字</h4>
            <p>如何实现父容器高度固定，文字可能一行，两行或更多行的垂直居中对齐呢？
                实现的关键是把文字当图片处理。用一个标签将所有的文字封装起来，设置文字与图片相同的display属性值（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中即可。
                核心css代码如下，
                外部标签：
            </p>
            <code>div{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}</code>
            <p>内部标签：</p>
            <code>span{display:inline-block; font-size:0.1em; vertical-align:middle;}</code>
            <p>下面这张是实例演示页面的效果截图：</p>
            <p><img src="http://image.zhangxinxu.com/image/blog/200908/2009-08-27_224624.png" alt=""></p>
            <p>有几点简要说明：</p>
            <ol>
                <li>此例子用em做单位，如果您对em单位了解不够，把握不来的话，可以使用px做单位，值要换；</li>
                <li>外部div不能使用浮动；</li>
                <li>外部div高度和文字大小比例1.14为宜；</li>
                <li>内部标签的vertical-align:middle可以省略，但是外部div高度和文字大小比例要修改，我自己试了一下，高度比字体1.5左右的样子；</li>
                <li>系统原因，我没能够在IE8下测试。</li>
            </ol>
            <p>实现的最终效果和JavaScript演示，您可以狠狠地点击这里去看看。</p>
        </div>
        <div class="article-footer">
            <div>
                <a href="" class=""><<上一篇：jQuery文章详情</a><a href="" class="public-float-right">下一篇：jQuery文章详情>></a>
            </div>
            <div class="article-comment">
                <h3>文章评论</h3>
                <p><span>姓  名：</span><input type="text"/><i class="fi fi-asterisk"></i></p>
                <p><span>Q   Q : </span><input type="text"/><i class="fi fi-asterisk"></i></p>
                <span>内  容：</span><div id="commentEditor"></div><i class="fi fi-asterisk public-margin-left"></i>
                <p><button class="public-btn public-btn-mid">提 交</button></p>
            </div>
            <div class="article-comment-list">
                <h3>评论列表</h3>
                <ul>
                    <li>
                        <div class="article-comment-detail">
                            <p>张三：</p>
                            <p>2018-7-22 0:20</p>
                            <div>
                                试了鑫大大的文中的多行文字居中的例子，copy代码放在chrome 下，效果是中线偏下，当所文字的大小换成px后就没问题了，严格剧中，文字上下空白大小完成一致
                            </div>
                            <a href="">回复</a>
                            <div class="article-comment" style="display: none;">
                                <h3>文章评论</h3>
                                <p><span>姓  名：</span><input type="text"/><i class="fi fi-asterisk"></i></p>
                                <p><span>Q   Q : </span><input type="text"/><i class="fi fi-asterisk"></i></p>
                                <p><span>内  容：</span><textarea name="" id=""></textarea><i class="fi fi-asterisk"></i></p>
                                <p><button class="public-btn public-btn-mid">提 交</button></p>
                            </div>
                        </div>
                        <ul class="article-commnet-apply">
                            <li>
                                <div class="article-comment-detail">
                                    <p>张三：</p>
                                    <p>2018-7-22 0:20</p>
                                    <div>
                                        试了鑫大大的文中的多行文字居中的例子，copy代码放在chrome 下，效果是中线偏下，当所文字的大小换成px后就没问题了，严格剧中，文字上下空白大小完成一致
                                    </div>
                                    <a href="">回复</a>
                                </div>
                                <ul class="article-commnet-apply">
                                    <li>
                                        <div class="article-comment-detail">
                                            <p>张三：</p>
                                            <p>2018-7-22 0:20</p>
                                            <div>
                                                试了鑫大大的文中的多行文字居中的例子，copy代码放在chrome 下，效果是中线偏下，当所文字的大小换成px后就没问题了，严格剧中，文字上下空白大小完成一致
                                            </div>
                                            <a href="">回复</a>
                                        </div>
                                        <ul class="article-commnet-apply">
                                            <li>
                                                <div class="article-comment-detail">

                                                </div>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="article-comment-detail">
                            <p>张三：</p>
                            <p>2018-7-22 0:20</p>
                            <div>
                                试了鑫大大的文中的多行文字居中的例子，copy代码放在chrome 下，效果是中线偏下，当所文字的大小换成px后就没问题了，严格剧中，文字上下空白大小完成一致
                            </div>
                            <a href="">回复</a>
                        </div>
                        <ul class="article-commnet-apply">
                            <li>
                                <div class="article-comment-detail">

                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <footer></footer>
</div>

<script src="../../js/lib/require.js" data-main="../../js/public/articleDetail"></script>
</body>
</html>